/**
 * Author: Shen Yanqiu
 * Date: 2017-12-13
 * Time: 18:31
 *
 */
import React from 'react';
import { connect } from 'dva';
import { api } from 'config';
import TopOperation from './../../../components/TopOperation';
import { Button, Modal, Form, Input, Icon, Upload, Progress, message, notification } from 'antd';
import styles from './Operation.less';
import ShowUploadInfo from "./ShowUploadInfo";

const FormItem = Form.Item;

const settings = {
  designation: true, // 名称输入框
  status: false, // 状态选择框
  ownership: false, // 所属选择框
  section: false, // 部门选择框
  starlevel: false, // 星级选择框
  object: false, // 对象选择框
  time: false, // 时间选择框
  textAlgin: "right", // 搜索框向右
};
class Operation extends React.Component {
  state = {
    percent: null,
    uploadstatus: null,
    loading: false,
    visible: false,
    fileList: [],
  };
  render () {
    const {
      SearchData,
      createFolder,
      remove,
      accesstoken,
      form: {
        getFieldDecorator,
        validateFields,
        resetFields,
      },
    } = this.props;
    // 点击删除
    const deletehandler = () => {
      remove();
    };
    // 点击创建文件夹
    const createholderhandler = () => {
      this.setState({
        visible: true,
      });
    };
    // 点击下载
    const downloadhandler = () => {

    };
    // 点击上传
    const changeHandler = (info) => {
      // info.file.percent = info.event.percent;
      // console.log(info.file.status);
      this.setState({
        fileList: info.fileList,
      });
      // console.log(this.state.fileList);
      // if (info.event) {
      //   const percentInt = parseInt(info.event.percent);
      //   this.setState({
      //     percent: percentInt,
      //     uploadstatus: 'active',
      //   });
      // }
      // if (info.file.percent === 100 && info.file.error) {
      //   this.setState({
      //     uploadstatus: 'exception',
      //   });
      //   message.error(`${info.file.name}上传失败`);
      //   setTimeout(() => {
      //     this.setState({
      //       percent: null,
      //     });
      //   }, 1000);
      // } else if (info.file.percent === 100 && info.file.status === "done") {
      //   this.setState({
      //     uploadstatus: 'success',
      //   });
      //   message.success(`${info.file.name}上传成功`);
      //   setTimeout(() => {
      //     this.setState({
      //       percent: null,
      //     });
      //   }, 1000);
      // }
      // console.log(info.file);
    };
    // 配置上传文件
    const uploadProps = {
      action: '//jsonplaceholder.typicode.com/posts/',
      // `${api.uploadfiles}?accessToken=${accesstoken}`,
      showUploadList: false,
      defaultFileList: [],
      onChange: changeHandler,
      multiple: true,
    };

    const uploadhandler = () => {

    };
    // 新建文件夹
    const { visible, loading, percent, uploadstatus, fileList } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    // 取消添加文件夹
    const handleCancel = () => {
      this.setState({ visible: false });
    };
    // 提交添加文件夹
    const handleOk = (e) => {
      e.preventDefault();
      validateFields((err, values) => {
        if (err) {
          return;
        }
        createFolder(values);
        resetFields();
        this.setState({ visible: false });
      });
    };
    // console.log(this.state.fileList);
    return (
      <div>
        <TopOperation {...settings} SearchData={SearchData} />
        <ShowUploadInfo fileList={fileList} />
        <div className={styles.BtnGroup}>
          <Upload {...uploadProps} className={styles.upload}>
            <Button type={"primary"} size="large" icon="upload" onClick={uploadhandler}>上传</Button>
          </Upload>
          <Button type={"default"} size="large" icon="folder-add" onClick={createholderhandler}>新建文件夹</Button>
          <Button type={"default"} size="large" icon="download" onClick={downloadhandler}>下载</Button>
          <Button type={"danger"} size="large" icon={"delete"} onClick={deletehandler}>批量删除</Button>
        </div>
        <Modal
          className={styles.createFolderModal}
          visible={visible}
          title={(<div className={styles.modalTitle}><span>新建文件夹</span></div>)}
          wrapClassName="vertical-center-modal"
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[
            <div key={1} className={styles.back}>
              <Button key="back" onClick={handleCancel}>取消</Button>
            </div>,
            <div key={2} className={styles.submit}>
              <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
              确定
              </Button>
            </div>,
          ]}
        >
          <Form className={styles.formModal} hideRequiredMark>
            <FormItem
              {...formItemLayout}
              label="名称"
            >
              {getFieldDecorator('foldername', {
                rules: [{
                  required: true, message: '名称不能为空！',
                }],
              })(
                <Input placeholder={"请输入文件夹名称"} />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="可见范围"
            >
              {getFieldDecorator('range')(
                <Input placeholder={"请输入文件夹可见范围"} />
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}
export default Form.create()(Operation);
